<template>
  <div :class="['dialog', {'dialog--open': visible}]">
    <div class="dialog-overlay"></div>
    <div class="dialog-main">
      <header class="dialog-header">
        <slot name="header">
          <h2 class="dialog-title">{{title}}</h2>
        </slot>
        <button class="btn-shutdown" @click="close">
          <i class="iconfont">&#xe600;</i>
        </button>
      </header>
      <main class="dialog-content">
        <slot name="content">dialog-content</slot>
        <slot></slot>
      </main>
      <footer class="dialog-footer">
        <slot name="footer">
          <div class="buttons-area">
            <button class="btn btn-default" @click="cancel">取消</button>
            <button class="btn btn-primary" @click="confirm">确定</button>
          </div>
        </slot>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    title: {
      type: String,
      default: ''
    }
  },
  methods: {
    confirm () {
      console.log('点击了确认按钮')
      this.$emit('update:visible', false)
    },
    cancel () {
      console.log('点击了取消按钮')
      this.$emit('update:visible', false)
    },
    close () {
      console.log('点击了关闭按钮')
      this.$emit('update:visible', false)
    }
  },
  data () {
    return {

    }
  },
  computed: {
    a () {
      return ''
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../stylesheets/mixins/_layout.scss';

@keyframes mainTransition {
  from {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.dialog {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  pointer-events: none;
  @include flex-justify-center;

  &.dialog--open {
    pointer-events: auto;

    .dialog-overlay {
      opacity: 1;
    }

    .dialog-main {
      animation: mainTransition 0.3s;
      animation-fill-mode: forwards;
    }
  }
}

.dialog-overlay {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s;
  background: rgba(55, 58, 71, 0.9);
}

.dialog-main {
  opacity: 0;
  width: 386px;
  position: relative;
  z-index: 30;
  background: #fff;
}

.dialog-header {
  position: relative;
  padding: 10px 20px;
  text-align: center;
  border-bottom: 1px solid #dddfe2;

  .dialog-title {
    font-size: 18px;
    font-weight: 700;
  }

  .btn-shutdown {
    position: absolute;
    top: 12px;
    right: -40px;
    z-index: 31;

    .iconfont {
      font-size: 20px;
      color: #fff;
    }
  }
}

.dialog-content {
  padding: 20px;
}

.dialog-footer {
  padding: 10px;

  .buttons-area {
    text-align: right;
    margin-right: -10px;

    .btn {
      margin-right: 20px;
    }
  }
}
</style>
